<template>
  <div class="article-detail">
    <!-- navbar导航栏 -->
    <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
    <!-- 正文 -->
    <div class="body">
      <!-- 页面加载前loading -->
      <div v-if="loading" class="loading">
        <van-loading type="spinner" color="#1989fa" />
      </div>

      <!-- 正文 -->
      <div v-else-if="info.title" class="main">
        <!-- 标题 -->
        <div class="title">{{ info.title }}</div>
        <!-- 评论阅读数量等 -->
        <div class="userinfo">
          {{ info.pubdate }} 阅读 :{{ info.read_count }} 评论:
          {{ info.comm_count }}
        </div>
        <!-- 个人信息 -->
        <div class="detail">
          <img :src="info.aut_photo" alt="" />
          <div class="name">{{ info.aut_name }}</div>
          <!-- 关注组件 -->
          <Follow
            :follow="info.is_followed"
            :userId="info.aut_id"
            @changeFollow="changeFollow"
          />
        </div>
        <div v-html="info.content"></div>
      </div>

      <!-- 404 -->
      <div v-else-if="error === 404" class="notFound">
        <van-icon name="failure" size="40" color="#1989fa" />
        <p>您访问的资源不存在</p>
      </div>

      <!-- 未知错误 -->
      <div v-else class="notFound">
        <van-icon name="failure" size="40" color="#1989fa" />
        <van-button plain type="primary" @click="getArticleDetail"
          >点击加载更多</van-button
        >
      </div>

      <!-- 评论列表 -->
      <CommendList
        v-if="info.art_id"
        :artId="info.art_id"
        @tranData="tranData"
        type="a"
        :list="list"
        @replayPupShow="replayPupShow"
        @likeCli="likeCli"
        @addCommentList="addCommentList"
      />
    </div>
    <!-- 底部区域 -->
    <div class="bottom">
      <!-- 搜索框 -->
      <van-button
        round
        size="mini"
        plain
        icon="plus"
        type="primary"
        @click="addCommentshow = true"
        >抢沙发</van-button
      >
      <!-- 评论 -->
      <div class="commend">
        <van-icon name="chat-o" size="16" :badge="total" />
        <div>评论</div>
      </div>
      <!--点赞 -->
      <div class="commend">
        <!-- 加v-if是因为获取数据太慢，组件渲染后数据没有获取到，父给子传了一个undefinr -->
        <Like
          v-if="info.attitude"
          :attitude="info.attitude"
          :artId="info.art_id"
          @changeLike="changeLike"
        />
        <div>点赞</div>
      </div>
      <!-- 收藏 -->
      <div class="commend">
        <!-- 加v-if是因为获取数据太慢，组件渲染后数据没有获取到，父给子传了一个undefinr -->
        <Collect
          v-if="info.art_id"
          :collected="info.is_collected"
          :artId="info.art_id"
          @changeCollect="changeCollect"
        />
        <div>收藏</div>
      </div>
      <!-- 分享 -->
      <div class="commend">
        <van-button icon="share-o" size="mini" style="border: none" />
        <div>分享</div>
      </div>
    </div>

    <!-- 添加评论弹层 -->
    <van-popup v-model="addCommentshow" position="bottom">
      <AddComment :target="info.art_id" @addComment="addComment" />
    </van-popup>

    <!-- 回复列表弹层 -->
    <van-popup
      v-model="isreplayPupShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <Replay
        v-if="isreplayPupShow"
        :currentcomment="currentcomment"
        :artId="id"
        @closeReplay="isreplayPupShow = false"
        @likeCli="likeCli"
        @chnageCommmentNum="chnageCommmentNum"
      />
    </van-popup>
  </div>
</template>

<script>
import Replay from './components/replay.vue'
import AddComment from './components/add-comment.vue'
import CommendList from './components/commend-list.vue'
import Collect from '@/components/collect.vue'
import Like from '@/components/like.vue'
import Follow from '@/components/follow.vue'
import { getArticleDetail } from '@/api/article'
export default {
  name: 'ArticleDeail',
  components: {
    Follow,
    Like,
    Collect,
    CommendList,
    AddComment,
    Replay
  },
  created () {
    this.getArticleDetail()
  },
  data () {
    return {
      loading: true, // 文章数据未获取是loading
      list: [], // 评论列表
      id: this.$route.params.id, // 文章id
      info: {}, // 用户信息
      error: 0, // 文章数据获取失败状态码控制显示页面
      total: 0, // 评论数量
      isreplayPupShow: false,
      addCommentshow: false,
      currentcomment: {}
    }
  },
  methods: {
    // 获取文章详情
    async getArticleDetail () {
      try {
        const { data } = await getArticleDetail(this.id)
        this.info = data
      } catch (err) {
        this.$toast('获取文章失败')
        if (err.response && err.response.status === 404) {
          this.error = 404
        }
      }
      this.loading = false
    },
    // 关注点击
    changeFollow (boo) {
      this.info.is_followed = boo
    },
    // 文章点赞
    changeLike (val) {
      this.info.attitude = val
    },
    changeCollect () {
      this.info.is_collected = !this.info.is_collected
    },
    // 子组件传递评论数量
    tranData (total) {
      this.total = total
    },
    // 子组件传递新添加评论
    addComment (item) {
      this.list.unshift(item)
      this.addCommentshow = false
    },
    replayPupShow (obj) {
      this.isreplayPupShow = true
      this.currentcomment = obj
    },
    likeCli (id) {
      const a = this.list.find((item) => item.com_id === id)
      a.is_liking = !a.is_liking
    },
    addCommentList (arr) {
      this.list.push(...arr)
    },
    // 添加评论后修改评论数量
    chnageCommmentNum (id) {
      this.list.map((item) => {
        if (item.com_id === id) {
          return (item.reply_count += 1)
        } else {
          return item
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bottom {
  display: flex;
  align-items: center;
  position: fixed;
  z-index: 999;
  justify-content: space-around;
  width: 100%;
  height: 55px;
  background-color: #fff;
  bottom: 0;
  .van-search {
    .van-search__content {
      width: 160px;
    }
  }
  .commend {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
.body {
  padding: 10px;
  height: 565px;
  background-color: #fff;
  overflow: auto;
  .loading {
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .notFound {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    p {
      margin-top: 25px;
      color: skyblue;
    }
  }
  .main {
    .title {
      font-size: 20px;
      font-weight: 600;
    }
    .userinfo {
      margin: 20px 0;
      font-size: 12px;
      color: #bbb;
    }
    .detail {
      display: flex;
      align-items: center;
      justify-content: space-around;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-left: -15px;
      }
      .name {
        margin-left: -70px;
      }
      .van-button {
        padding: 8px 20px;
      }
    }
  }
}
</style>
